@extends('layouts.app')
@section('static')
	<!-- <script type="text/javascript" src="/static/js/index.js"></script> -->
	<link rel="stylesheet" type="text/css" href="/static/css/iconfont.css">
	<script type="text/javascript" src="/static/js/vue.min.js"></script>
  <script type="text/javascript" src="/static/js/moment.js"></script>
  <script type="text/javascript" src="/static/js/zh-cn.js"></script>
  <script type="text/javascript" src="/static/js/jquery-1.11.2.min.js"></script>
  <style type="text/css">
  [v-cloak] {
  display:none !important;
  }
  </style>
@endsection

@section('sidebar')
    @parent

    <p>这边会附加在主要的侧边栏。</p>
@endsection

@section('content')
<a href="{{route('admins')}}">测试连接id:{{Input::get('id')}} name: {{Request::get('name')}}</a>
<button id="frmbtn">测试api</button>
<!-- <i class="iconfont_md icon-21tianbaohuan">wewewew</i>
<i class="iconfont_md icon-data">wewewew</i>
<i class="iconfont_md icon-navlist">wewewew</i>
<div>rtrt</div> -->
<!-- <div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
    directiva v-bind:class
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      class1: true
  }
});
</script> -->
<!-- <div id="app">
    @{{5+5}}<br>
    @{{ ok ? 'YES' : 'NO' }}<br>
    @{{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script> -->
<!-- <div id="app">
    <p>@{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script> -->

<!-- <div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈啥，打字辛苦啊！！！</p>
    </template>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
})
</script> -->
<!-- <div id="app">
  <ol>
    <li v-for="(site,key) in sites">
      @{{ site.name }}--@{{key}}
    </li>
  </ol>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
function test(){  
    var prop = 1;  
    return function(){  
        return prop++;  
    }  
      
}  
var t = test();//outputs 1，因为prop++没有执行  
alert(t());  
alert(test()()); 
 function aa(){  
    var b=10;  
    (function cc(){                          
        b++;  
        alert(b);  
        })();  
    }
    aa();-->
<!--     <script>
window.onload=function(){  
var li=document.getElementsByTagName("li");  
for(var i=0;i<li.length;i++){  
  (function(n){  
         li[i].onclick=function(){  
             alert(n);  
        }  
           
         })(i);  
     li[i].onclick=(function(n){  
         return  function(){  
            alert(n);          
         }   
      })(i);
    }  
}  
</script> -->
<!-- <div id="app">
    <p v-if="seen">现在你看到我了</p>
    <template v-if="ok">
      <h1>菜鸟教程</h1>
      <p>学的不仅是技术，更是梦想！</p>
      <p>哈哈啥，打字辛苦啊！！！</p>
    </template>
</div>
<ul>  
   <li>1</li>  
   <li>2</li>  
   <li>3</li>  
   <li>4</li>  
   <li>5</li>  
 </ul> 
 <script>
new Vue({
  el: '#app',
  data: {
    seen: true,
    ok: true
  }
}) -->
<!-- <div id="app">
  <ol>
    <li v-for="(site,key) in sites">
      @{{ site.name }}--@{{key}}
    </li>
  </ol>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  }
}); -->
<!-- <div id="app">
    <p>@{{ message }}</p>
    <input type="text" name="ss" v-model="message">
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
    
<script>
var vm=new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script> -->
        <div id="app">

            <fieldset>
                <legend>
                    Create New Person
                </legend>
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" v-model="newPerson.name"/>
                </div>
                <div class="form-group">
                    <label>Age:</label>
                    <input type="text" v-model="newPerson.age"/>
                </div>
                <div class="form-group">
                    <label>Sex:</label>
                    <select v-model="newPerson.sex">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
                </div>
                <div class="form-group">
                    <label></label>
                    <button @click="createPerson">Create</button>
                </div>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(person,key) in people" v-cloak>
                    <td>@{{ person.name }}</td>
                    <td>@{{ person.age }}</td>
                    <td>@{{ person.sex }}</td>
                    <td :class="'text-center'"><button @click="deletePerson(person,key)">Delete</button></td>
                </tr>
            </tbody>
        </table>
        <input type="text" id="getdate" name="ss" value="232323">
        </div>
        <div id="app1">
           <runoob></runoob>
        </div>
        <div id="app2">
           <runoob></runoob>
        </div>
    </body>
    <script>
$(function(){
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 // 注册
Vue.component('runoob', {
  template: '<h1>自定义组件232323!</h1>'
})
// 创建根实例
new Vue({
  el: '#app1',
  components: {
    // <runoob> 将只在父模板可用
    'runoob': Child
  }
})
new Vue({
  el: '#app2'
})
        var vm = new Vue({
            el: '#app',
            data: {
                newPerson: {
                    name: '',
                    age: 0,
                    sex: 'Male'
                },
                people: [{
                    name: 'Jack',
                    age: 30,
                    sex: 'Male'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: 'Male'
                }, {
                    name: 'Tracy',
                    age: 22,
                    sex: 'Female'
                }, {
                    name: 'Chris',
                    age: 36,
                    sex: 'Male'
                }]
            },
            methods:{
                createPerson: function(){
                    this.people.push(this.newPerson);
                    // 添加完newPerson对象后，重置newPerson对象
                    this.newPerson = {name: '', age: 0, sex: 'Male'}
                },
                deletePerson: function(item,index){
                    // 删一个数组元素
                     this.people.splice(index,1);
                     alert($("#getdate").val());
                    /*alert(item.name);
                    this.people.pop(item);*/
                }
            }
        });
    });
    </script>
<script type="text/javascript">
 moment.locale('zh-cn');
var date="2017-7-10";
console.log(date);
/*alert(moment(date).fromNow());*/
/*alert(moment.duration().humanize());
 alert(moment.unix(date).duration().humanize());*/

     $("#frmbtn").click(function(){
        var accessToken="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJub2FoQHppeGkubmV0IiwiYXVkIjoiaHR0cHM6XC9cL3NsYi5tZDE2OC5jbiIsImlhdCI6MTUwMTEzMTE2NSwiZXhwIjoxNTc3ODA4MDAwLCJjbGllbnQiOiJxaXh1bnRvbmcifQ.B-4kXMLJDZ-qkUvPTYE0lr5usbdk-gYrfdUlJ4SCIOQ";
        $.ajax({
            url: 'http://suzhizao.cn/api/receive',
            type: 'POST',
            dataType: 'json',
            data: {"name": 'value1'},
            beforeSend: function(request) {
             request.setRequestHeader("Authorization", 'Bearer '+accessToken);
           },
        })
        .done(function($return) {
            console.log($return);
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        

        });
</script>
@endsection